<template>
	<view class="login-box" :class="{ st: storeName === 'shangtuo', fd: storeName === 'fendi' }" :style="{ backgroundImage: `url(${bg})` }">
		<view :class="{ shangtuo: storeName === 'shangtuo' }">
			<!-- <image width="40vw" mode="widthFix"   src="/static/images/login/ygs_dlyz.png" /> -->
			<image v-if="storeName === 'shangtuo'" style="height: 430rpx; width: 80%" src="/static/images/login/ygs_dlyz.png" />
			<!-- <image v-else style="height: 430rpx; width: 100%" src="/static/images/login/ygs_dlyz.png" /> -->
			<!-- <image v-else style="height: 430rpx; width: 80%" src="@/static/images/logo.png" mode="aspectFit" /> -->
			<view v-else>
				<image style="width: 115rpx; height: 115rpx" :src="logo" mode=""></image>
				<view style="margin-top: 58rpx" class="p">您好！</view>
				<view class="p">欢迎使用「管店易」</view>
				<view class="p2">—— 用了管店易 管店更容易</view>
			</view>
		</view>

		<!-- 1 :style="{ marginTop: storeName === 'shangtuo' ? '80rpx' : '20rpx' }" 有验证码时用 -->
		<view class="login-form">
			<u-form :model="loginForm" ref="myForm" :error-type="errorTypes" :labelWidth="0">
				<u-form-item prop="username">
					<u-input placeholder="请输入账号" border="none" prefixIcon="account" v-model="loginForm.username" clearable prefixIconStyle="font-size: 48rpx;color: #909399" />
				</u-form-item>
				<u-form-item prop="password">
					<u-input
						:password="isView"
						clearable
						border="none"
						placeholder="请输入密码"
						prefixIcon="lock"
						v-model="loginForm.password"
						prefixIconStyle="font-size: 48rpx;color: #909399"
					>
						<template slot="suffix">
							<u-icon :name="isView ? 'eye-off' : 'eye-fill'" size="26" @click="isView = !isView"></u-icon>
						</template>
					</u-input>
				</u-form-item>

				<!-- 2.验证码 -->
				<!-- 	<u-form-item v-if="storeName === 'fendi'" prop="verificationCode">
					<u-input
						clearable
						border="none"
						placeholder="请输入验证码"
						prefixIcon="bag"
						v-model="loginForm.verificationCode"
						prefixIconStyle="font-size: 48rpx;color: #909399"
					>
						<template slot="suffix">
							<image @click="getVerificationCode" style="width: 180rpx; height: 70rpx" :src="verificationImg" mode=""></image>
						</template>
					</u-input>
				</u-form-item> -->
			</u-form>
			<view style="margin-top: 20rpx; width: 25%; margin-left: auto">
				<u-checkbox-group @change="checkboxChangeRemember">
					<u-checkbox
						:activeColor="storeName === 'shangtuo' ? '#F3C45D' : '#C63434'"
						labelSize="14"
						:customStyle="{ marginBottom: '8px' }"
						label="记住密码"
						name="记住密码"
						:checked="isRemember"
					></u-checkbox>
				</u-checkbox-group>
			</view>
			<!-- <view class="checkbox">
				<u-checkbox-group size="14" v-model="checked" @change="checkboxChange">
					<u-checkbox labelSize="14" shape="square" label="我已阅读并同意" name="1"></u-checkbox>
				</u-checkbox-group>
				<view class="gltx">《隐私政策》</view>
				<view>和</view>
				<view class="gltx">《产品服务协议》</view>
			</view> -->
			<view style="margin-top: 60rpx">
				<u-button :customStyle="{ background: storeName === 'shangtuo' ? '#F3C45D' : '#C63434', color: '#fff' }" size="large" shape="circle" @click="submit">登录</u-button>
			</view>
		</view>
	</view>
</template>

<script>
import { mapMutations } from 'vuex';
import { OnALogin } from '../../common/modules/orderAssistan';
import { uSetStorageSync } from '../../utils/uniUtils';
import { baseName } from '@/utils/env.js';
export default {
	data() {
		return {
			bg: require('./image/fendi/login_bg_2.png'),
			logo: require('./image/fendi/login_logo_fendi.png'),
			isRemember: false,
			storeName: '', // 判断是fendi还是shangtuo
			verificationImg: '',
			loginForm: {
				username: '',
				password: '',
				isEncryption: 0,
				clientType: 1,
				loginType: 1
			},
			checked: [],
			isView: true,
			isCheck: true,
			errorTypes: ['toast'],
			rules: {
				username: [
					{
						required: true,
						message: '请输入账号',
						trigger: ['blur', 'change']
					}
				],
				password: [
					{
						required: true,
						message: '请输入密码',
						trigger: ['blur', 'change']
					}
				],
				verificationCode: [
					{
						required: true,
						message: '请输入验证码',
						trigger: ['blur', 'change']
					}
				]
			}
		};
	},
	onReady() {
		this.$refs.myForm.setRules(this.rules);
	},
	async onLoad() {
		const loginInfo = await uni.getStorageSync('rememberPassword');
		if (loginInfo) {
			this.loginForm.username = loginInfo.username;
			this.loginForm.password = loginInfo.password;
			this.isRemember = true;
		}
		//  3.验证码
		// if (this.storeName === 'fendi') {
		// 	this.getVerificationCode();
		// }
	},
	onShow() {
		this.storeName = baseName;
	},
	methods: {
		...mapMutations(['login']),
		//  4.验证码
		// async getVerificationCode() {
		// 	const { data } = await this.$api.getVerificationCodeAPI();
		// 	this.loginForm.verificationKey = data.verificationKey;
		// 	this.verificationImg = data.verificationCode;
		// },
		checkboxChangeRemember(e) {
			if (e.length > 0) {
				this.isRemember = true;
			} else {
				this.isRemember = false;
			}
		},
		checkboxChange(arr) {
			if (arr.length > 0) {
				this.isCheck = true;
			} else {
				this.isCheck = false;
			}
		},
		async submit() {
			let that = this;
			if (!that.isCheck) {
				uni.showToast({
					title: '请阅读并同意《隐私政策》和《产品服务协议》',
					duration: 3000,
					icon: 'none'
				});
			} else {
				/*         await that.$refs.myForm.validate();
        const res = await that.$api.GetJwtToken(that.loginForm);

        OnALogin({
          ...that.loginForm,
          code: 101,
        }).then((result) => {
          console.log("result", result);
        });

        that.login({
          store: res.data.store,
          token: res.data.token.token,
        });

        uni.switchTab({
          url: "/pages/tabBar/home",
        }); */

				that.$refs.myForm.validate().then((valid) => {
					that.$api
						.GetJwtToken(that.loginForm)
						.then(async (res) => {
							console.log(res);
							// if (process.env.NODE_ENV === 'development') {
							// 	const result = await OnALogin({
							// 		...that.loginForm,
							// 		code: 101
							// 	});
							// 	if (result.status == 0) {
							// 		uSetStorageSync('orderSign', result.sign);
							// 	}
							// }

							that.login({ store: res.data.store, token: res.data.token.token });

							uni.switchTab({
								url: '/pages/tabBar/home'
							});
							if (this.isRemember) {
								uni.setStorageSync('rememberPassword', this.loginForm);
							} else {
								uni.removeStorageSync('rememberPassword');
							}
						})
						.catch((err) => {
							//  5.验证码
							// if (this.storeName === 'fendi') {
							// 	this.getVerificationCode();
							// }
						});
				});
			}
		}
	}
};
</script>

<style>
page {
	background-color: #fff;
}
</style>
<style lang="scss" scoped>
.login-box {
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	// /* 最关键这一行！ *-/
	height: 100vh;
	.shangtuo {
		display: flex;
		margin-top: 100rpx;
		justify-content: center;
	}
	.p {
		font-weight: 800;
		font-size: 48rpx;
		color: #333333;
		line-height: 58rpx;
	}
	.p2 {
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 30rpx;
		color: #555555;
		line-height: 26rpx;
		margin-top: 20rpx;
	}
	.login-form {
		margin-top: 80rpx;
	}
	.checkbox {
		margin-top: 80rpx;
		font-size: 28rpx;
		display: flex;
		.gltx {
			color: #f00;
		}
	}
}
.fd {
	padding: 200rpx 80rpx 0 80rpx;
}
.st {
	padding: 100rpx 40rpx 0 40rpx;
}
</style>
